<!--
 * @Author: QinJiu
 * @Date: 2023-01-06 16:37:21
 * @LastEditors: Qinjiu
 * @LastEditTime: 2023-01-06 18:56:13
 * @Description: -
-->
<template>
  <div class="echarts-demo-conatiner">
    <BaseEcharts
      ref="chartRef"
      :loading="loading"
      :option="option"
      @init="onInit"
    />
  </div>
</template>

<script>
function getChartOption(chartData = {}) {
  const option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
  return option;
}

function delay(duration = 2000) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, duration);
  });
}

export default {
  data() {
    return {
      loading: false,
      option: {},
    };
  },
  async mounted() {
    console.log("echarts通用组件的实例：", this.$refs.chartRef);
    this.getChartData();
  },
  methods: {
    async getChartData() {
      this.loading = true;
      await delay();
      this.loading = false;
      this.option = getChartOption();
      // this.option = {};
    },
    onInit(echartsIns) {
      console.log("echarts初始化完成 ---> echarts实例：", echartsIns);
    },
  },
};
</script>

<style lang="less" scoped>
.echarts-demo-conatiner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // width: 600px;
  // height: 400px;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
